import React, {Component} from 'react';
import {Avatar, Comment} from "antd";
import {SERVER_PICTURE_URL} from "../../api/APIURLDefine";
import moment from "moment";
import {inject, observer} from "mobx-react";
import CommentStore from "../../stores/CommentStore";
import UserStore from "../../stores/UserStore";
import CommentReply from "./CommentReply";
import "./index.css"

interface IComment {
    commentStore?: CommentStore;
    userStore?: UserStore;
    comment: any;
    reply: any
}

@inject("commentStore", "userStore")
@observer
class CommentItem extends Component<IComment, any> {
    constructor(props) {
        super(props);
        this.state = {
            action: ""
        }
    }

    setAction = (e) => {
        if (e === 0) {
            this.setState({action: "liked"});
        } else {
            this.setState({action: "disliked"});
        }
    }
    actions = [
        <span key="comment-basic-reply-to" onClick={() => {
            this.props.commentStore.SetReplyId(this.props.comment.id);
        }}>回复</span>,
    ];

    render() {
        const comment = this.props.comment;
        const reply = this.props.reply;
        if (!comment.hasOwnProperty("avatarUrl")) {
            comment.avatarUrl = "images/defaultAvatar.png";
        }
        return (
            <Comment
                actions={this.actions}
                author={<span
                    style={{fontSize: "0.14rem"}}>{reply === null ? comment?.nickname : comment?.nickname + "回复" + reply}</span>}
                avatar={
                    <div className="QAcomment">
                        <Avatar
                            src={`${SERVER_PICTURE_URL + comment.avatarUrl}`}
                            alt=""
                            size={48}
                            style={{marginRight: "0.1rem"}}
                        />
                    </div>

                }
                content={
                    <p>
                        {
                            comment?.content
                        }
                    </p>
                }
                datetime={
                    <span>{moment(comment.createdTime).fromNow()}</span>
                }
            >
                {this.props.children}
                {
                    this.props.commentStore.replyId === comment.id ? <CommentReply/>
                        : null
                }
            </Comment>
        );
    }
}

export default CommentItem;